* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.web {
    width: 100%;
    height: 100%;
    .bg {
        width: 100%;
        height: 80vh;
        background-image: url(../img/bg_day.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
        .top_pipe {
            width: 52px;
            position: absolute;
            top: 0;
            left: 100%;
            background-image: url(../img/pipe_down.png);
            background-repeat: no-repeat;
            background-position: bottom;
        }
        .bottom_pipe {
            width: 52px;
            position: absolute;
            left: 100%;
            background-image: url(../img/pipe_up.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }
    .land {
        width: 100%;
        height: 20vh;
        position: absolute;
        bottom: 0;
        background-image: url(../img/land.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bird {
        width: 48px;
        height: 48px;
        position: absolute;
        left: 40%;
        top: 30%;
        overflow: hidden;
        background-image: url(../img/bird0_4.png);
        position-size: 120% 120%;
    }
    .bird_fly {
        animation: bird_img .5s infinite steps(3);
    }
    @keyframes bird_img {
        from {
            background-position: 0% 0%;
        }
        to {
            background-position: -300% 0%;
        }
    }
    .mark {
        position: absolute;
        left: 50%;
        top: 15%;
        transform: translate(-50%, -50%);
        font-size: 48px;
        display: none;
    }
    .start {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .5);
        text-align: center;
        
        .img_box {
            width: 100%;
            position: absolute;
            top: 25%;
            img{
                width: 80%;
            }
            
        }
        .start_btn {
            width: 100%;
            position: absolute;
            top: 45%;
            
        }
        .start_text{
            font-size: 36px;
            font-weight:bold;
            width: 100%;
            position: absolute;
            top: 60%;
        }
    }
    .over {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .5);
        text-align: center;
        display: none;
        .over_img {
            width: 100%;
            position: absolute;
            top: 25%;
            img {
                width: 80%;
            }
        }
        .over_text {
            width: 100%;
            color: white;
            font-size: 36px;
            font-family: cursive;
            position: absolute;
            top: 42%;
        }
        .over_btn {
            width: 100%;
            position: absolute;
            top: 55%;
            img{
                width: 25%;
            }
        }
    }
}